<template>
  <div class="works-display-form">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="ruleForm.projectName"></el-input>
      </el-form-item>
      <el-form-item label="项目职责" prop="projectDuty">
        <el-input v-model="ruleForm.projectDuty"></el-input>
      </el-form-item>
      <el-form-item label="起始时间" prop="startTime">
        <el-date-picker v-model="ruleForm.startsStopTime"
        type="daterange" style="width:100%" value-format="yyyy-MM-dd"
        format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="项目描述" prop="projectIntro">
        <el-input type="textarea" v-model="ruleForm.projectIntro"></el-input>
      </el-form-item>
      <el-form-item label="是否上线" prop="isOnline">
        <el-radio-group v-model="ruleForm.isOnline">
          <el-radio v-for="item in onlineList" :key="item.value" :label="item.value">
            {{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="线上链接" prop="link">
        <el-input v-model="ruleForm.link"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">
          {{userItem?'编辑':'立即创建'}}
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ProjectApi from '@/api/project';

export default {
  name: 'ProjectForm',
  props: ['dialogVisible', 'userItem', 'onlineList'],
  data() {
    return {
      ruleForm: {
        projectName: this.userItem ? this.userItem.project_name : '',
        projectDuty: this.userItem ? this.userItem.project_duty : '',
        isOnline: this.userItem ? this.userItem.online.value : '',
        link: this.userItem ? this.userItem.link : '',
        startsStopTime: this.userItem ? [this.userItem.start_time, this.userItem.end_time] : [],
        projectIntro: this.userItem ? this.userItem.project_intro : '',
      },
      rules: {
        projectName: [
          { required: true, message: '请输入所在公司', trigger: 'blur' },
          {
            min: 2,
            max: 15,
            message: '长度在2到15个字符',
            trigger: 'blur',
          },
        ],
        projectDuty: [
          { required: true, message: '请输入项目职责', trigger: 'blur' },
          {
            min: 2,
            max: 20,
            message: '长度在2到20个字符',
            trigger: 'blur',
          },
        ],
        startsStopTime: [
          { required: true, message: '请输入入学时间', trigger: 'blur' },
        ],
        isOnline: [
          { required: true, message: '请选择项目是否上线', trigger: 'blur' },
        ],
        link: [
          { required: false, message: '请输入线上地址', trigger: 'blur' },
        ],
        projectIntro: [{ required: true, message: '工作描述', trigger: 'blur' }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.userItem) {
            this.ruleForm.id = this.userItem.id;
            ProjectApi
              .putProject(this.ruleForm)
              .then((data) => {
                if (data.data) {
                  this.$message({
                    message: data.message,
                    type: 'success',
                  });
                  this.resetForm('ruleForm');
                  this.$emit('update:dialogVisible', false);
                } else {
                  this.$message({
                    message: data.message,
                    type: 'error',
                  });
                }
              })
              .catch((err) => {
                this.$message({
                  message: err.message,
                  type: 'error',
                });
              });
          } else {
            ProjectApi
              .postProject(this.ruleForm)
              .then((data) => {
                if (data.data) {
                  this.$message({
                    message: data.message,
                    type: 'success',
                  });
                  this.resetForm('ruleForm');
                  this.$emit('update:dialogVisible', false);
                } else {
                  this.$message({
                    message: data.message,
                    type: 'error',
                  });
                }
              })
              .catch((err) => {
                this.$message({
                  message: err.message,
                  type: 'error',
                });
              });
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  watch: {
    userItem() {
      if (this.userItem) {
        this.ruleForm.projectName = this.userItem.project_name;
        this.ruleForm.projectDuty = this.userItem.project_duty;
        this.ruleForm.isOnline = this.userItem.online.value;
        this.ruleForm.link = this.userItem.link;
        this.ruleForm.startsStopTime = [this.userItem.start_time, this.userItem.end_time];
        this.ruleForm.projectIntro = this.userItem.project_intro;
      } else {
        this.ruleForm.projectName = '';
        this.ruleForm.projectDuty = '';
        this.ruleForm.isOnline = '';
        this.ruleForm.link = null;
        this.ruleForm.startsStopTime = [];
        this.ruleForm.projectIntro = '';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.works-display-form {
  width: 100%;
  height: auto;
}
</style>
